<template>
  <div class="select-brand-detail page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- 导航 -->
    <!-- <div class="navbar" style="padding-top: 50px">
      <div class="navbar-back" @click="goback"><van-icon name="arrow-left" /></div>
      <div class="navbar-close" @click="goback"><van-icon name="cross" /></div>
      <div class="navbar-title" >{{this.$route.query.name}}</div>
      <div class="navbar-close" ></div>
      <div class="navbar-close" ></div>
    </div> -->
      <!-- <div class="search-type"><img src="../../assets/image/icon_search.png" @click="searchCarType"></div> -->
      
    <navbar :title="$route.query.name"></navbar>
    <div class="blank"></div>
    <!-- 车型详情 -->
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
      <div
      v-for="(item,index) in carType"
      :key="index"
      class="car-type-item"
      >
        <div class="manufacturer">{{item.label}}</div>
        <van-cell
        v-for="brand in item.options"
        :key="brand.biId"
        :value="brand.biName"
         @click="goDetail(brand)"
         />
      </div>
    </div>
  </div>
</template>

<script>
import {getbiNameList, getVtdname} from './api'

export default {
  data() {
    return {
      carType: [],
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:''
    }
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    async getCarType() {
      
      let vnId = this.$route.query.id
      const {data} = await getbiNameList(vnId)
      // console.log(data.list)
      let obj = {}
      data.forEach((item) => {
        if (obj[item.manufacturer]) {
          obj[item.manufacturer].push(item)
        } else {
          obj[item.manufacturer] = [item]
        }
      })
      let arr = Object.keys(obj).map((item) => {
        return {
          label: item,
          options: obj[item]
        }
      })
      this.carType = arr
      console.log(this.carType)
      // console.log(arr)
    },
    async goDetail(n) {
      const { data } = await getVtdname(n.biId)
      // console.log(data)
      if(data.length == 0) return this.$toast('该车系暂无型号')
      let query = {
        name: n,
        id: this.$route.query.id, // 上个路由携带的id
      }
      console.log(n.count)
      this.$router.push({
        name: 'SelectBrandMoreDetail',
        query: {
          name: this.$route.query.name,
          id: this.$route.query.id, // 上个路由携带的id
          biName: n.biName,
          biId: n.biId,
          myName: this.$route.query.myName
        }
      })
    }
    
  },
  mounted() {
    // console.log(this.$route.query)
    document.querySelector('body').setAttribute('style', 'background-color: #F8F8F8')
    this.getCarType()
  },
  created() {
    
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      console.log(this.$route.query)
    // this.getCarType()
  }
}
</script>

<style scoped lang='less'>
.manufacturer{
  background-color: #F8F8F8;
  padding: 10px 10px;
  font-size: 14px;
}
  .car-type-item{
    border-bottom: 1px solid #F8F8F8;
  }
  // .blank{
  //   height: 5px;
  //   background: #F8F8F8;
  // }
  .navbar{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 46px;
    // background-color: pink;
    font-size: 17px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    .navbar-back{
      text-align: center;
      flex: 1;
    }
    .navbar-close{
      text-align: center;
      flex: 1;
    }
    .navbar-title{
      flex: 8;
      text-align: center;
    }
    .search-type{
      flex: 1;
      // margin-right: 10px;
    }
  }
</style>
